<template>
  <view class="waterfall-container">
    <view
      v-for="(column, colIndex) in waterfallColumns"
      :key="colIndex"
      class="waterfall-column"
      :style="{
        width: `${columnWidth}px`,
        marginLeft: colIndex > 0 ? `${gutter}px` : '0',
      }"
    >
      <view
        v-for="item in column"
        :key="item.id"
        class="waterfall-item"
        :style="{ height: `${item.displayHeight}px` }"
        @tap="$emit('item-click', item)"
      >
        <image
          :src="item.url"
          mode="widthFix"
          class="waterfall-image"
          :style="{ height: `${item.displayHeight}px` }"
        />

        <!-- TODO: 后续抽出成插槽 -->
        <view v-if="showInfo" class="item-info">
          <wd-img :src="item.avatar" width="48rpx" height="48rpx" round />
          <text v-if="item.title" class="item-title">{{ item.way?.replace(/-gpt4o/g, "") }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import useWaterfall, { type WaterfallItem } from "@/hooks/useWaterfallFlow";

const props = defineProps({
  // 图片数据数组
  items: {
    type: Array as () => WaterfallItem[],
    required: true,
    default: () => [],
  },
  // 列数
  columns: {
    type: Number,
    default: 2,
  },
  // 列间距
  gutter: {
    type: Number,
    default: 10,
  },
  // 是否显示图片信息
  showInfo: {
    type: Boolean,
    default: true,
  },
  // 是否显示图片尺寸
  showSize: {
    type: Boolean,
    default: false,
  },
});

// 使用瀑布流 Hooks - 传入函数确保响应性
const { waterfallColumns, columnWidth } = useWaterfall(
  () => props.items, // 改为函数形式返回 props.items
  props.columns,
  props.gutter,
);
</script>

<style lang="scss" scoped>
.waterfall-container {
  box-sizing: border-box;
  display: flex;
  padding: 30rpx;
  transition: all 0.3s ease;
}

.waterfall-column {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.waterfall-item {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

  &:active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
  }
}

.waterfall-image {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

.item-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 20rpx;
  align-items: center;
  padding: 16rpx;
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.3s ease;

  .item-title {
    display: block;
    font-size: 24rpx;
    font-weight: bold;
    color: white;
    transition: font-size 0.2s ease;
  }

  .item-size {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #ddd;
    transition: font-size 0.2s ease;
  }
}
</style>
